<template>
  <div class="home-container">
    <header class="header">
      <img src="../assets/logo.svg" alt="Logo" class="logo" />
      <nav class="navbar">
        <router-link to="/home" class="nav-link">首页</router-link>
        <router-link to="/grades" class="nav-link">成绩查询</router-link>
        <router-link to="/learning" class="nav-link">学习情况</router-link>
        <router-link to="/chat" class="nav-link">讯飞助理</router-link>
        <router-link to="/profile" class="nav-link">个人中心</router-link>
      </nav>
    </header>
    <router-view></router-view>

    <div style="margin: 20px 0">
      <RouterLink to="/test">
        跳转到test.vue
      </RouterLink>
    </div>

    <div style="margin: 20px 0">
      <el-button type="primary" @click="router.push('/test')">
        跳跳乐
      </el-button>
    </div>

    <div style="margin: 20px 0">
      <RouterLink to="/">
        跳转到Home.vue
      </RouterLink>
    </div>

    <div style="margin: 20px 0">
      <el-button type="primary" @click="router.push('/chat')">
        星火大模型
      </el-button>
    </div>

    <div>
      <el-input v-model="data.input" style="width: 240px" placeholder="Please input" clearable :prefix-icon="Search"/>
      <el-input suffix-icon="Calendar" style="width: 200px ">Search</el-input>
      <el-input v-model="data.descr" style="width: 240px" placeholder="我是码农" clearable :prefix-icon="Search" type="textarea"/>
    </div>

    <div style="margin: 20px 0">
      <el-select
          multiple
          v-model="data.value"
          placeholder="Select"
          size="default"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>{{data.value}}
    </div>

    <div>
      <el-radio-group v-model="data.radio1">
        <el-radio value="Value 1">Option 1</el-radio>
        <el-radio value="Value 2">Option 2</el-radio>
      </el-radio-group>
    </div>

    <div>
      <el-radio-group v-model="data.radio2" size="large">
        <el-radio-button label="New York" value="1" />
        <el-radio-button label="Washington" value="2" />
        <el-radio-button label="Los Angeles" value="3" />
        <el-radio-button label="Chicago" value="4" />
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import router from "@/router/index.js";

const data = reactive({
  input: null,
  descr: null,
  options: ['苹果', '香蕉', '梨子'],
  value: '',
  radio1: '',
  radio2: '2'
});
</script>

<style scoped>
.home-container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #2c3e50;
  color: white;
}

.logo {
  width: 50px;
  height: auto;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-link {
  margin: 0 10px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #42b983;
}

.router-view {
  padding: 20px;
}
</style>